{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>{{page_title}} - {{site_name}}</title>

    <!-- Favicon -->
    <link rel="icon" href="{% static 'img/core-img/favicon.ico'  %}">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}"> {% block header %} {% endblock header %}
    
    <!-- jQuery-2.2.4 js -->
    <script src="{% static 'js/jquery/jquery-2.2.4.min.js' %}"></script>
    <style>
        #post-list:empty:after{
            content:"No post listed yet.";
            color:var(--gray);
            text-align:center;
            font-style:italic;
            width:100%
        }
    </style>
</head>

<body>
    <!-- Preloader -->
    <div class="preloader d-flex align-items-center justify-content-center">
        <div class="lds-ellipsis">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

    <!-- ##### Header Area Start ##### -->
    {% include './top-navigation.html' %}
    <!-- ##### Header Area End ##### -->
    {% if messages %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                {% for message in messages %}
                <div class="alert alert-{{message.tags}} w-100 rounded-0 mb-2 redirect-msg">
                    <div class="d-flex w-100">
                        <div class="col-auto flex-shrink-1 flex-grow-1">{{ message|safe }}</div>
                        <div class="col-auto text-center">
                            <a class="text-dark text-sm" type="javascript:void(0)" onclick="$(this).closest('.alert').remove()"><i class="fa fa-times"></i></a>
                        </div>
                    </div>

                </div>
                {% endfor %}
            </div>
        </div>
        <script>
            $(function(){
                setTimeout(function(){
                    $('html, body').scrollTop(0)
                },300)
            })
        </script>
    </div>
    {% endif %} {% block content %} {% endblock content %}
    <!-- ##### Footer Area Start ##### -->
    {% include './footer.html' %}
    <!-- ##### Footer Area Start ##### -->

    <!-- ##### All Javascript Script ##### -->
    <!-- Popper js -->
    <script src="{% static 'js/bootstrap/popper.min.js' %}"></script>
    <!-- Bootstrap js -->
    <script src="{% static 'js/bootstrap/bootstrap.min.js' %}"></script>
    <!-- All Plugins js -->
    <script src="{% static 'js/plugins/plugins.js' %}"></script>
    <!-- Active js -->
    <script src="{% static 'js/active.js' %}"></script>
    {% block javascripts %} {% endblock javascripts %}
    <script>
        $(function(){
            if($('#post-list>div').length <= 0){
                $('#post-list').html('')
            }
        })
    </script>
</body>

</html>